23 - Éléments flottants

Faire flotter un élément

La propriété CSS float permet de sortir un élément du flux normal du HTML pour le placer à gauche ou à droite de son conteneur. Les éléments inlines présents dans le même conteneur (comme les textes) entoureront cet élément.

Exemple avec une image :

            

                /* L'image dans le conteneur flottera à gauche du conteneur et le texte viendra se mettre autour */
                .container img{
                    float: left;
                    width: 100px;
                    margin: 10px 20px;
                }

                .container{
                    width: 500px;
                    background-color: grey;
                    padding: 15px;
                }

            
        

            

                <div class="container">
                    <p>
                        <img src="images/terre.jpg" alt="La Terre">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum esse est, facilis hic ipsa molestiae nesciunt nostrum obcaecati praesentium quasi quis sint sit soluta tempora? A, beatae blanditiis dolor eos esse eum eveniet hic impedit quasi quo reprehenderit soluta! A aspernatur assumenda debitis eius eligendi error facere, fugiat ipsum laborum, magnam officiis optio quisquam ratione repudiandae sunt vel veniam voluptas!
                    </p>
                </div>

            
        

Résultat :